<template>
  <div class="teacher-statistics">
    <a-table
      :columns="columns"
      :dataSource="teacherData"
      :pagination="{ pageSize: 5 }"
    >
      <template #score="text">
        <a-progress :percent="text" :stroke-color="getColor(text)" />
      </template>
      <template #action="record">
        <a-button type="link" @click="showDetail(record)">详情</a-button>
      </template>
    </a-table>

    <a-drawer
      :title="`评价详情`"
      width="720"
      :visible="visible"
      @close="onClose"
    >
      <div v-if="currentTeacher" class="teacher-detail">
        <a-descriptions bordered>
          <a-descriptions-item label="教师编号">{{ currentTeacher.id }}</a-descriptions-item>
          <a-descriptions-item label="所属部门">{{ currentTeacher.department }}</a-descriptions-item>
          <a-descriptions-item label="职称">{{ currentTeacher.title }}</a-descriptions-item>
        </a-descriptions>

        <a-divider orientation="left">评价详情</a-divider>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-card title="学生评价" size="small">
              <a-progress 
                type="dashboard" 
                :percent="currentTeacher.studentScore" 
                :stroke-color="getColor(currentTeacher.studentScore)"
              />
              <div class="score-detail">
                <p>教学态度: {{ currentTeacher.studentDetail.attitude }}分</p>
                <p>教学内容: {{ currentTeacher.studentDetail.content }}分</p>
                <p>教学方法: {{ currentTeacher.studentDetail.method }}分</p>
              </div>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card title="督导评价" size="small">
              <a-progress 
                type="dashboard" 
                :percent="currentTeacher.supervisorScore" 
                :stroke-color="getColor(currentTeacher.supervisorScore)"
              />
              <div class="score-detail">
                <p>教学规范: {{ currentTeacher.supervisorDetail.standard }}分</p>
                <p>教学效果: {{ currentTeacher.supervisorDetail.effect }}分</p>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '教师编号', dataIndex: 'id', key: 'id', width: 100 },
        { title: '教师姓名', dataIndex: 'name', key: 'name' },
        { title: '所属部门', dataIndex: 'department', key: 'department' },
        { title: '学生评价', dataIndex: 'studentScore', key: 'studentScore', scopedSlots: { customRender: 'score' } },
        { title: '督导评价', dataIndex: 'supervisorScore', key: 'supervisorScore', scopedSlots: { customRender: 'score' } },
        { title: '综合评分', dataIndex: 'totalScore', key: 'totalScore', scopedSlots: { customRender: 'score' } },
        { title: '操作', key: 'action', width: 100, scopedSlots: { customRender: 'action' } }
      ],
      teacherData: [
        {
          id: 'T1001',
          name: '王芳',
          department: '信息工程系',
          title: '教授',
          studentScore: 92,
          supervisorScore: 88,
          totalScore: 90,
          studentDetail: {
            attitude: 95,
            content: 90,
            method: 91
          },
          supervisorDetail: {
            standard: 89,
            effect: 87
          }
        },
        // 更多教师数据...
      ],
      visible: false,
      currentTeacher: null
    }
  },
  methods: {
    getColor(score) {
      if (score >= 90) return '#52c41a'
      if (score >= 80) return '#1890ff'
      if (score >= 70) return '#faad14'
      return '#f5222d'
    },
    showDetail(record) {
		console.log("record",record)
      this.currentTeacher = record
      this.visible = true
    },
    onClose() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.teacher-detail {
  padding: 10px;
}
.score-detail {
  margin-top: 15px;
}
.score-detail p {
  margin: 8px 0;
}
</style>